// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.



////////////////////////////////////////////////////////////////
$(function() {

  $('#new_fighter').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    submitButtons: 'input[type="submit"]',
    fields: {
      'fighter[name]': {
        message: 'The name is not valid',
        validators: {
          notEmpty: {
            message: 'Name is required and cannot be empty'
          },
          stringLength: {
            min: 4,
            max: 30,
            message: 'Name is between 4 and 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z\s]+$/,
            message: 'Name can only consist of alphabetical and space'
          }
        }
      },
            
      'fighter[nickname]': {      
        message: 'The nickname is not valid',
        validators: {
          notEmpty: {
            message: 'Nickname is required and cannot be empty'
          },
          stringLength: {
            min: 2,
            max: 30,
            message: 'Nickname is between 2 and 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z\s]+$/,
            message: 'Nickname can only consist of alphabetical and space'
          }
        }
      },

      'fighter[born]': {
        message: '',
        validators: {
          date: {
            format: 'MM/DD/YYYY',
            message: 'The value is not a valid date'
          },

          notEmpty: {
            message: 'Birthday is required and cannot be empty'
          },
        }
      },

      'fighter[gender]': {
        validators: {
          notEmpty: {
            message: 'Gender is required and cannot be empty'
          },
        }
      },

      'fighter[city]': {
        message: 'The city name is not valid',
        validators: {
          notEmpty: {
            message: 'City name is required and cannot be empty'
          },
          regexp: {
            regexp: /^[a-zA-Z\s]+$/,
            message: 'City name can only consist of alphabetical and space'
          }
        }
      },

      'fighter[state]': {
        validators: {
          notEmpty: {
            message: 'State is required and cannot be empty'
          },
        }
      },

      'fighter[zip]': {
        message: 'The zip code is not valid',
        validators: {
          notEmpty: {
            message: 'Zip code is required and cannot be empty'
          },
          zipCode: {
            country: 'US'
          }
        }
      },

      'fighter[phone]': {
        message: 'The phone number is not valid',
        validators: {
          notEmpty: {
            message: 'Phone number is required and cannot be empty'
          },
          phone: {
            country: 'US'
          }
        }
      },

      'fighter[weight]': {
        validators: {
          notEmpty: {
            message: 'Weight is required and cannot be empty'
          },
          integer: {
            message: 'The value is not an integer'
          }
        }
      },

      'fighter[height_feet]': {
        validators: {
          notEmpty: {
            message: 'Height (feet) is required'
          },
          integer: {
            message: 'The value is not an integer'
          }
        }

      },

      'fighter[height_inches]': {
        validators: {
          notEmpty: {
            message: 'Height (inches) is required'
          },
          integer: {
            message: 'The value is not an integer'
          }
        }
      },

      'fighter[skill_trained_1]': {
        validators: {
          integer: {
            message: 'The value is not an integer'
          }
        }
      },

      'fighter[skill_trained_2]': {
        validators: {
          integer: {
            message: 'The value is not an integer'
          }
        }
      },

      'fighter[disclaim_accept]': {
        validators: {
          notEmpty: {
            message: 'Please read the Term and Policy and sign Disclaimer'
          }
        }
      },
    }
  });
});



////////////////////////////////////////////////////////////////
$(function() {

  //$('.carousel').carousel({
  //  interval: false
  //});

  $("#datepicker-dob").datepicker({

  });
  
  $('#datepicker-dob').on('change', function(e) {
    // Validate the date when user change it
    $('#new_fighter')
    // Get the bootstrapValidator instance
    .data('bootstrapValidator')
    // Mark the field as not validated, so it'll be re-validated when the user change date
    .updateStatus('fighter[born]', 'NOT_VALIDATED', null)
    // Validate the field
    .validateField('fighter[born]');
  });
  

  var opts = {
    lines: 13, // The number of lines to draw
    length: 20, // The length of each line
    width: 10, // The line thickness
    radius: 30, // The radius of the inner circle
    corners: 1, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#fff', // #rgb or #rrggbb or array of colors
    speed: 1, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
  };

  $("#avatar-save").on( "click", function() {
    var avatar_t = document.getElementById('avatar-spinner');
    var avatar_spinner = new Spinner(opts).spin(avatar_t);
    $('#spinner-holder-avatar.spinner-holder').show();
  });
  
  $("#poster-save").on( "click", function() {
    var poster_t = document.getElementById('poster-spinner');    
    var poster_spinner = new Spinner(opts).spin(poster_t);
    $('#spinner-holder-poster.spinner-holder').show();
  });
  

  $("#modal-avatar input:file").change(function (){
    var checkExist = setInterval(function() {
      if ($('#modal-avatar .fileinput-preview img').length) {

        $('#modal-avatar .fileinput-preview img').attr('id', 'avatar-cropbox');
        var imgSource = $('#modal-avatar .fileinput-preview img').attr('src');
        $('#avatar-preview').attr('src', imgSource);
        $('#avatar-cropbox').Jcrop({
          keySupport: false,
          aspectRatio: 0.8,
          setSelect: [0, 0, 160, 200],
          onChange: avatarPreview,
          onSelect: avatarPreview,
        });
        clearInterval(checkExist);
      }
    }, 100); // Replace this polling with callback!!!
  });

  $("#modal-poster input:file").change(function (){
    var checkExist = setInterval(function() {
      if ($('#modal-poster .fileinput-preview img').length) {

        $('#modal-poster .fileinput-preview img').attr('id', 'poster-cropbox');
        var imgSource = $('#modal-poster .fileinput-preview img').attr('src');
        $('#poster-preview').attr('src', imgSource);
        $('#poster-cropbox').Jcrop({
          keySupport: false,
          aspectRatio: 1.5385,
          setSelect: [0, 0, 350, 228],
          onChange: posterPreview,
          onSelect: posterPreview,
        });
        clearInterval(checkExist);
      }
    }, 100); // Replace this polling with callback!!!
  });


});


function avatarPreview(coords)
{
  var rx = 160 / coords.w;
  var ry = 200 / coords.h;

  $('#avatar_crop_img').val("avatar");
  $('#avatar_crop_x').val(coords.x);
  $('#avatar_crop_y').val(coords.y);
  $('#avatar_crop_w').val(coords.w);
  $('#avatar_crop_h').val(coords.h);

  $('#avatar-preview').css({
    width: Math.round(rx * $('#avatar-cropbox').width()) + 'px',
    height: Math.round(ry * $('#avatar-cropbox').height()) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
}

function posterPreview(coords)
{
  var rx = 350 / coords.w;
  var ry = 228 / coords.h;

  $('#poster_crop_img').val("poster");
  $('#poster_crop_x').val(coords.x);
  $('#poster_crop_y').val(coords.y);
  $('#poster_crop_w').val(coords.w);
  $('#poster_crop_h').val(coords.h);

  $('#poster-preview').css({
    width: Math.round(rx * $('#poster-cropbox').width()) + 'px',
    height: Math.round(ry * $('#poster-cropbox').height()) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
}

